<template>
  <md-scroll-view ref="scroller" class="box-container" :auto-reflow="true" :scrolling-x="false" :bouncing="false">
    <div class="history-text" v-if="history&&value==''" v-show="history.length>0">历史记录</div>
    <md-field class="field-list" v-if="value==''&&mode!='1'">
      <search-item type="history" v-for="(item,index) in history" :key="index" :info="item" @select="onItemSelect"></search-item>
    </md-field>
    <md-field class="field-list" v-if="value==''&&mode=='1'">
      <search-item type="history" v-for="(item,index) in stations" :key="index" :info="item" @select="onItemSelect"></search-item>
    </md-field>
    <md-field class="field-list" v-if="value!=''">
      <search-item type="station" v-for="(item,index) in filterdStation" :key="index" :info="item" @select="onItemSelect"></search-item>
      <search-item type="search" v-for="(item,index) in searchs" :key="index" :info="item" @select="onItemSelect"></search-item>
    </md-field>
  </md-scroll-view>
</template>

<script>
import SearchItem from './SearchItem';
import { Field, ScrollView } from 'mand-mobile';
const PinyinEngine = require('pinyin-engine');
var pinyinEngine = null;
export default {
  name: 'search-box',
  components: {
    [SearchItem.name]: SearchItem,
    [Field.name]: Field,
    [ScrollView.name]: ScrollView
  },
  data() {
    return {
      filterdStation: null
    };
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    stations: {
      type: Array,
      default: () => {
        return [];
      }
    },
    history: {
      type: Array,
      default: () => {
        return [];
      }
    },
    searchs: {
      type: Array,
      default: () => {
        return [];
      }
    },
    mode: {
      // 地图类型：1:站点、2:围栏、3:共存
      type: String,
      default: '1'
    }
  },
  watch: {
    value: 'onValueChange'
  },
  methods: {
    onValueChange(val) {
      if (pinyinEngine) {
        this.filterdStation = pinyinEngine.query(val);
      }
    },
    onItemSelect(item) {
      this.$emit('select', item);
    }
  },
  created() {
    pinyinEngine = new PinyinEngine(this.stations, 'stationName');
  }
};
</script>

<style lang="stylus" scoped>
.box-container {
  height: calc(100vh - 88px);
  width: 100vw;
  background-color: #EFEFEF;
  position: absolute;
  top: 88px;

  .field-list {
    margin-top: 20px;
  }

  .history-text {
    margin-top: 20px;
    font-size: 26px;
    line-height: 36px;
    color: #666666;
    margin-left: 30px;
  }
}
</style>
